<template>
    <!-- 柱状图容器 -->
    <div ref="chartRef" class="histogram"></div>
</template>

<script setup>
// 引入 vue 相关方法
import { ref, onMounted, onUnmounted } from 'vue'
// 引入 echarts
import * as echarts from 'echarts'
// 引入防抖工具
import { debounce } from '@/tools/debounce.js'
// 引入样式
import '@/assets/chart.css'

const chartRef = ref(null) // 图表 DOM 引用
const windowWidth = ref(window.innerWidth) // 窗口宽度
let myChart = null // echarts 实例

// X 轴分类
const categories = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
// 两组数据
const series1Data = [1, 2, 3, 4, 5, 6, 7]
const series2Data = [2, 3, 4, 5, 6, 7, 8]

let intervalId = null // 定时器 id

onMounted(() => {
    // 只有容器有宽高时才初始化
    if (chartRef.value.clientWidth > 0 && chartRef.value.clientHeight > 0) {
        initChart()
        // 监听窗口大小变化，动态调整图表
        window.addEventListener('resize', debounce(() => windowWidth.value = window.innerWidth, 200))
        // 移动端自适应
        if (windowWidth.value < 768) {
            myChart.resize({
                width: 300,
                height: 200
            })
        }
        // 启动动态数据更新
        startDynamicUpdate()
    }
})

onUnmounted(() => {
    clearInterval(intervalId)
})

// 初始化柱状图
function initChart() {
    myChart = echarts.init(chartRef.value)

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: {
            data: ['系列1', '系列2'],
            align: 'left',
            left: 10,
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLabel: {
                interval: 0, // 强制显示所有标签
                rotate: 45 // 旋转标签，避免重叠
            }
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '系列1',
                type: 'bar',
                stack: '总量',
                data: series1Data,
            },
            {
                name: '系列2',
                type: 'bar',
                stack: '总量',
                data: series2Data,
            },
        ],
    }
    myChart.setOption(option)
}

// 启动定时器动态更新数据（模拟请求新数据）
function startDynamicUpdate() {
    intervalId = setInterval(() => {
        const newData1 = categories.map(() => Math.floor(Math.random() * 100)) // 可替换为请求数据
        const newData2 = categories.map(() => Math.floor(Math.random() * 100))
        myChart.setOption({
            series: [
                { data: newData1 },
                { data: newData2 }
            ],
        });
    }, 10000);
}
</script>